<div class="content-section introduction">
    <div class="feature-intro">
        <h1>Dropdown</h1>
        <p>Dropdown is used to select an item from a list of options.</p>
    </div>
    <app-inputStyleSwitch></app-inputStyleSwitch>
</div>


<div class="content-section implementation">
    <div class="card">
        <h5>Single</h5>
        <p-dropdown [options]="cities" [(ngModel)]="selectedCity1" placeholder="Select a City" optionLabel="name" [showClear]="true"></p-dropdown>
    
        <h5>Editable</h5>
        <p-dropdown [options]="cities" [(ngModel)]="selectedCity2" editable="true" optionLabel="name"></p-dropdown>
    
        <h5>Advanced with Templating, Filtering and Clear Icon</h5>
        <p-dropdown [options]="countries" [(ngModel)]="selectedCountry" optionLabel="name" [filter]="true" [showClear]="true" placeholder="Select a Country">
            <ng-template pTemplate="selectedItem">
                <div class="country-item country-item-value"  *ngIf="selectedCountry">
                    <img src="assets/showcase/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + selectedCountry.code.toLowerCase()" />
                    <div>{{selectedCountry.name}}</div>
                </div>
            </ng-template>
            <ng-template let-country pTemplate="item">
                <div class="country-item">
                    <img src="assets/showcase/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + country.value.code.toLowerCase()" />
                    <div>{{country.value.name}}</div>
                </div>
            </ng-template>
        </p-dropdown>
    
        <h5>Group</h5>
        <p-dropdown [options]="groupedCities" [(ngModel)]="selectedCity3" placeholder="Select a City" [group]="true">
            <ng-template let-group pTemplate="group">
                <div class="p-d-flex p-ai-center">
                    <img src="assets/showcase/images/demo/flag/flag_placeholder.png" [class]="'p-mr-2 flag flag-' + group.value" style="width: 20px"/>
                    <span>{{group.label}}</span>
                </div>
            </ng-template>
        </p-dropdown>
    
        <h5>Virtual Scroll (10000 Items)</h5>
        <p-dropdown [options]="items" [(ngModel)]="item" placeholder="Select Item" [virtualScroll]="true" [itemSize]="31" [filter]="false"></p-dropdown>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Documentation">
            <h5>CDK</h5>
            <p>VirtualScrolling enabled Dropdown depends on @angular/cdk's ScrollingModule so begin with installing CDK if not already installed.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
npm install @angular/cdk --save
</app-code>

            <h5>Import</h5>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;DropdownModule&#125; from 'primeng/dropdown';
</app-code>


            <h5>Getting Started</h5>
            <p>Dropdown requires a value to bind and a collection of options. There are two alternatives of how to define the options property; one way is providing a collection of SelectItem
            instances whereas other way is providing an array of arbitrary objects along with the optionLabel property to specify the field name of the option. SelectItem API is designed to have more control on how
            the options are displayed such as grouping and disabling however in most cases an arbitrary object collection will suffice. Example below demonstrates both cases.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-dropdown [options]="cities1" [(ngModel)]="selectedCity1"&gt;&lt;/p-dropdown&gt;

&lt;p-dropdown [options]="cities2" [(ngModel)]="selectedCity2" optionLabel="name"&gt;&lt;/p-dropdown&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;SelectItem&#125; from 'primeng/api';

interface City &#123;
  name: string;
  code: string;
&#125;

export class MyModel &#123;

    cities1: SelectItem[];

    cities2: City[];

    selectedCity1: City;

    selectedCity2: City;

    constructor() &#123;
        //SelectItem API with label-value pairs
        this.cities1 = [
            &#123;label:'Select City', value:null&#125;,
            &#123;label:'New York', value:&#123;id:1, name: 'New York', code: 'NY'&#125;&#125;,
            &#123;label:'Rome', value:&#123;id:2, name: 'Rome', code: 'RM'&#125;&#125;,
            &#123;label:'London', value:&#123;id:3, name: 'London', code: 'LDN'&#125;&#125;,
            &#123;label:'Istanbul', value:&#123;id:4, name: 'Istanbul', code: 'IST'&#125;&#125;,
            &#123;label:'Paris', value:&#123;id:5, name: 'Paris', code: 'PRS'&#125;&#125;
        ];

        //An array of cities
        this.cities2 = [
            &#123;name: 'New York', code: 'NY'&#125;,
            &#123;name: 'Rome', code: 'RM'&#125;,
            &#123;name: 'London', code: 'LDN'&#125;,
            &#123;name: 'Istanbul', code: 'IST'&#125;,
            &#123;name: 'Paris', code: 'PRS'&#125;
        ];
    &#125;

&#125;
</app-code>

            <h5>Model Driven Forms</h5>
            <p>Dropdown can be used in a model driven form as well.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-dropdown [options]="cities" formControlName="selectedCity"&gt;&lt;/p-dropdown&gt;
</app-code>

            <h5>Filtering</h5>
            <p>Options can be filtered using an input field in the overlay by enabling the <i>filter</i> property. By default filtering is done against
                label of the SelectItem and <i>filterBy</i> property is available to choose one or more properties of the SelectItem API.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-dropdown [options]="cities" [(ngModel)]="selectedCity" [filter]="true"&gt;&lt;/p-dropdown&gt;
&lt;p-dropdown [options]="cities" [(ngModel)]="selectedCity" [filter]="true" filterBy="label,value.name"&gt;&lt;/p-dropdown&gt;
</app-code>

            <h5>Grouping</h5>
            <p>Displaying options as grouped is enabled by providing a collection of SelectItemGroup instances and setting <i>group</i> property to true.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-dropdown [options]="groupedCars" [(ngModel)]="selectedCar" placeholder="Select a Car" [group]="true"&gt;&lt;/p-dropdown&gt;
</app-code>


<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;SelectItem&#125; from 'primeng/api';
import &#123;SelectItemGroup&#125; from 'primeng/api';

export class GroupDemo &#123;

    selectedCar: string;

    groupedCars: SelectItemGroup[];

    constructor() &#123;
        this.groupedCars = [
            &#123;
                label: 'Germany',
                items: [
                    &#123;label: 'Audi', value: 'Audi'&#125;,
                    &#123;label: 'BMW', value: 'BMW'&#125;,
                    &#123;label: 'Mercedes', value: 'Mercedes'&#125;
                ]
            &#125;,
            &#123;
                label: 'USA',
                items: [
                    &#123;label: 'Cadillac', value: 'Cadillac'&#125;,
                    &#123;label: 'Ford', value: 'Ford'&#125;,
                    &#123;label: 'GMC', value: 'GMC'&#125;
                ]
            &#125;,
            &#123;
                label: 'Japan',
                items: [
                    &#123;label: 'Honda', value: 'Honda'&#125;,
                    &#123;label: 'Mazda', value: 'Mazda'&#125;,
                    &#123;label: 'Toyota', value: 'Toyota'&#125;
                ]
            &#125;
        ];
    &#125;
&#125;
</app-code>

            <h5>Disabled Options</h5>
            <p>Particular options can be prevented from selection using the <i>disabled</i> property of SelectItem API.</p>

            <h5>Custom Content</h5>
            <p>Both the selected option and the options list can be templated to provide customization on the default behavior which is displaying <i>label</i> property of an option. Use
                "selectedItem" template to customize the selected label display and the "item" template to change the content of the options in the dropdown panel. In addition when grouping is enabled, "group" template is available
                to customize the option groups. All templates get the option instance as the default local template variable. If the options are custom objects not SelectItem instances, use value property to access the custom object.
            </p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-dropdown [options]="cars" [(ngModel)]="selectedCar" [style]="&#123;'width':'150px'&#125;"&gt;
     &lt;ng-template let-item pTemplate="selectedItem"&gt;
        &lt;img src="assets/showcase/images/demo/car/&#123;&#123;item.label&#125;&#125;.png" style="width:16px;vertical-align:middle" /&gt;
        &lt;span style="vertical-align:middle"&gt;&#123;&#123;item.label&#125;&#125;&lt;/span&gt;
    &lt;/ng-template&gt;
    &lt;ng-template let-car pTemplate="item"&gt;
        &lt;div style="position: relative;height:25px;"&gt;
        &lt;img src="assets/showcase/images/demo/car/&#123;&#123;car.label&#125;&#125;.png" style="width:24px;position:absolute;top:1px;left:5px"/&gt;
        &lt;div style="font-size:14px;float:right;margin-top:4px"&gt;&#123;&#123;car.label&#125;&#125;&lt;/div&gt; &lt;/div&gt;
    &lt;/ng-template&gt;
&lt;/p-dropdown&gt;
</app-code>


<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;SelectItem&#125; from 'primeng/api';

export class MyModel &#123;

    cars: SelectItem[];

    selectedCar: string;

    constructor() &#123;
        this.cars = [
            &#123;label: 'Audi', value: 'Audi'&#125;,
            &#123;label: 'BMW', value: 'BMW'&#125;,
            &#123;label: 'Fiat', value: 'Fiat'&#125;,
            &#123;label: 'Ford', value: 'Ford'&#125;,
            &#123;label: 'Honda', value: 'Honda'&#125;,
            &#123;label: 'Jaguar', value: 'Jaguar'&#125;,
            &#123;label: 'Mercedes', value: 'Mercedes'&#125;,
            &#123;label: 'Renault', value: 'Renault'&#125;,
            &#123;label: 'VW', value: 'VW'&#125;,
            &#123;label: 'Volvo', value: 'Volvo'&#125;,
        ];
    &#125;
&#125;
</app-code>

            <h5>Virtual Scrolling</h5>
            <p>VirtualScrolling is an efficient way of rendering the options by displaying a small subset of data in the viewport at any time. When dealing with huge number of options, it is suggested to enable VirtualScrolling
                to avoid performance issues. Usage is simple as setting virtualScroll property to true and defining itemSize to specify the height of an item. </p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-dropdown [options]="cities" [virtualScroll]="true" itemSize="30"&gt;&lt;/p-dropdown&gt;
</app-code>

            <h5>Animation Configuration</h5>
            <p>Transition of the open and hide animations can be customized using the showTransitionOptions and hideTransitionOptions properties,
                example below disables the animations altogether.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-dropdown [options]="cars" [(ngModel)]="selectedCar" [showTransitionOptions]="'0ms'" [hideTransitionOptions]="'0ms'"&gt;&lt;/p-dropdown&gt;
</app-code>
            <h5>Properties</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>options</td>
                            <td>array</td>
                            <td>null</td>
                            <td>An array of objects to display as the available options.</td>
                        </tr>
                        <tr>
                            <td>optionLabel</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Name of the label field of an option when an arbitrary objects instead of SelectItems are used as options.</td>
                        </tr>
                        <tr>
                            <td>name</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Name of the input element.</td>
                        </tr>
                        <tr>
                            <td>scrollHeight</td>
                            <td>string</td>
                            <td>200px</td>
                            <td>Height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value.</td>
                        </tr>
                        <tr>
                            <td>style</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Inline style of the element.</td>
                        </tr>
                        <tr>
                            <td>panelStyle</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Inline style of the overlay panel element.</td>
                        </tr>
                        <tr>
                            <td>styleClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the element.</td>
                        </tr>
                        <tr>
                            <td>panelStyleClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the overlay panel element.</td>
                        </tr>
                        <tr>
                            <td>filter</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When specified, displays an input field to filter the items on keyup.</td>
                        </tr>
                        <tr>
                            <td>filterBy</td>
                            <td>string</td>
                            <td>label</td>
                            <td>When filtering is enabled, filterBy decides which field or fields (comma separated) to search against.</td>
                        </tr>
                        <tr>
                            <td>filterMatchMode</td>
                            <td>string</td>
                            <td>contains</td>
                            <td>Defines how the items are filtered, valid values are "contains" (default) "startsWith", "endsWith", "equals", "notEquals", "in", "lt", "lte", "gt" and "gte".</td>
                        </tr>
                        <tr>
                            <td>filterPlaceholder</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Placeholder text to show when filter input is empty.</td>
                        </tr>
                        <tr>
                            <td>filterLocale</td>
                            <td>string</td>
                            <td>undefined</td>
                            <td>Locale to use in filtering. The default locale is the host environment's current locale.</td>
                        </tr>
                        <tr>
                            <td>required</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When present, it specifies that an input field must be filled out before submitting the form.</td>
                        </tr>
                        <tr>
                            <td>disabled</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When present, it specifies that the component should be disabled.</td>
                        </tr>
                        <tr>
                            <td>readonly</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When present, it specifies that the component cannot be edited.</td>
                        </tr>
                        <tr>
                            <td>ariaLabelledBy</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
                        </tr>
                        <tr>
                            <td>editable</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When present, custom value instead of predefined options can be entered using the editable input field.</td>
                        </tr>
                        <tr>
                            <td>maxlength</td>
                            <td>number</td>
                            <td>null</td>
                            <td>Maximum number of character allows in the editable input field.</td>
                        </tr>
                        <tr>
                            <td>appendTo</td>
                            <td>any</td>
                            <td>null</td>
                            <td>Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).</td>
                        </tr>
                        <tr>
                            <td>tabindex</td>
                            <td>number</td>
                            <td>null</td>
                            <td>Index of the element in tabbing order.</td>
                        </tr>
                        <tr>
                            <td>placeholder</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Default text to display when no option is selected.</td>
                        </tr>
                        <tr>
                            <td>inputId</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Identifier of the accessible input element.</td>
                        </tr>
                        <tr>
                            <td>selectId</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Identifier of the native element.</td>
                        </tr>
                        <tr>
                            <td>dataKey</td>
                            <td>string</td>
                            <td>null</td>
                            <td>A property to uniquely identify a value in options.</td>
                        </tr>
                        <tr>
                            <td>autofocus</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When present, it specifies that the component should automatically get focus on load.</td>
                        </tr>
                        <tr>
                            <td>autofocusFilter</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Applies focus to the filter element when the overlay is shown.</td>
                        </tr>
                        <tr>
                            <td>resetFilterOnHide</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Clears the filter value when hiding the dropdown.</td>
                        </tr>
                        <tr>
                            <td>dropdownIcon</td>
                            <td>string</td>
                            <td>pi pi-chevron-down</td>
                            <td>Icon class of the dropdown icon.</td>
                        </tr>
                        <tr>
                            <td>emptyFilterMessage</td>
                            <td>string</td>
                            <td>No results found</td>
                            <td>Text to display when filtering does not return any results.</td>
                        </tr>
                        <tr>
                            <td>autoDisplayFirst</td>
                            <td>boolean</td>
                            <td>true</td>
                            <td>Whether to display the first item as the label if no placeholder is defined and value is null.</td>
                        </tr>
                        <tr>
                            <td>group</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Whether to display options as grouped when nested options are provided.</td>
                        </tr>
                        <tr>
                            <td>showClear</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When enabled, a clear icon is displayed to clear the value.</td>
                        </tr>
                        <tr>
                            <td>baseZIndex</td>
                            <td>number</td>
                            <td>0</td>
                            <td>Base zIndex value to use in layering.</td>
                        </tr>
                        <tr>
                            <td>autoZIndex</td>
                            <td>boolean</td>
                            <td>true</td>
                            <td>Whether to automatically manage layering.</td>
                        </tr>
                        <tr>
                            <td>showTransitionOptions</td>
                            <td>string</td>
                            <td>.12s cubic-bezier(0, 0, 0.2, 1)</td>
                            <td>Transition options of the show animation.</td>
                        </tr>
                        <tr>
                            <td>hideTransitionOptions</td>
                            <td>string</td>
                            <td>.1s linear</td>
                            <td>Transition options of the hide animation.</td>
                        </tr>
                        <tr>
                            <td>ariaFilterLabel</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Defines a string that labels the filter input.</td>
                        </tr>
                        <tr>
                            <td>tooltip</td>
                            <td>any</td>
                            <td>null</td>
                            <td>Advisory information to display in a tooltip on hover.</td>
                        </tr>
                        <tr>
                            <td>tooltipStyleClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the tooltip.</td>
                        </tr>
                        <tr>
                            <td>tooltipPosition</td>
                            <td>string</td>
                            <td>top</td>
                            <td>Position of the tooltip, valid values are right, left, top and bottom.</td>
                        </tr>
                        <tr>
                            <td>tooltipPositionStyle</td>
                            <td>string</td>
                            <td>absolute</td>
                            <td>Type of CSS position.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Events</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                    <tr>
                        <th>Name</th>
                        <th>Parameters</th>
                        <th>Description</th>
                    </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>onClick</td>
                            <td>event: Click event</td>
                            <td>Callback to invoke when component is clicked.</td>
                        </tr>
                        <tr>
                            <td>onChange</td>
                            <td>event.originalEvent: Browser event<br />
                                event.value: Selected option value
                            </td>
                            <td>Callback to invoke when value of dropdown changes.</td>
                        </tr>
                        <tr>
                            <td>onFocus</td>
                            <td>event: Browser event</td>
                            <td>Callback to invoke when dropdown gets focus.</td>
                        </tr>
                        <tr>
                            <td>onBlur</td>
                            <td>event: Browser event</td>
                            <td>Callback to invoke when dropdown loses focus.</td>
                        </tr>
                        <tr>
                            <td>onShow</td>
                            <td>event: Animation event</td>
                            <td>Callback to invoke when dropdown overlay gets visible.</td>
                        </tr>
                        <tr>
                            <td>onHide</td>
                            <td>event: Animation event</td>
                            <td>Callback to invoke when dropdown overlay gets hidden.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Methods</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Parameters</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>resetFilter</td>
                            <td>-</td>
                            <td>Resets filtering.</td>
                        </tr>
                        <tr>
                            <td>focus</td>
                            <td>-</td>
                            <td>Applies focus.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-dropdown #dd [options]="cars" [(ngModel)]="selectedCar" filter="true"&gt;&lt;/p-dropdown&gt;
&lt;button type="button" pButton label="Clear" (click)="clearFilter(dd)"&gt;&lt;/button&gt;
</app-code>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
clearFilter(dropdown: Dropdown) &#123;
    dropdown.resetFilter();
&#125;
</app-code>

            <h5>Styling</h5>
            <p>Following is the list of structural style classes, for theming classes visit <a href="#" [routerLink]="['/theming']">theming page</a>.</p>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Element</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>p-dropdown</td>
                            <td>Container element.</td>
                        </tr>
                        <tr>
                            <td>p-dropdown-clearable</td>
                            <td>Container element when showClear is on.</td>
                        </tr>
                        <tr>
                            <td>p-dropdown-label</td>
                            <td>Element to display label of selected option.</td>
                        </tr>
                        <tr>
                            <td>p-dropdown-trigger</td>
                            <td>Icon element.</td>
                        </tr>
                        <tr>
                            <td>p-dropdown-panel</td>
                            <td>Icon element.</td>
                        </tr>
                        <tr>
                            <td>p-dropdown-items-wrapper</td>
                            <td>Wrapper element of items list.</td>
                        </tr>
                        <tr>
                            <td>p-dropdown-items</td>
                            <td>List element of items.</td>
                        </tr>
                        <tr>
                            <td>p-dropdown-item</td>
                            <td>An item in the list.</td>
                        </tr>
                        <tr>
                            <td>p-dropdown-filter-container</td>
                            <td>Container of filter input.</td>
                        </tr>
                        <tr>
                            <td>p-dropdown-filter</td>
                            <td>Filter element.</td>
                        </tr>
                        <tr>
                            <td>p-dropdown-open</td>
                            <td>Container element when overlay is visible.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Dependencies</h5>
            <p>None.</p>
        </p-tabPanel>

        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/dropdown" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
            <a href="https://stackblitz.com/edit/primeng-dropdown-demo" class="btn-viewsource" style="margin-left: .5em;" target="_blank">
                <span>Edit in StackBlitz</span>
            </a>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;h5&gt;Single&lt;/h5&gt;
&lt;p-dropdown [options]="cities" [(ngModel)]="selectedCity1" placeholder="Select a City" optionLabel="name" [showClear]="true"&gt;&lt;/p-dropdown&gt;

&lt;h5&gt;Editable&lt;/h5&gt;
&lt;p-dropdown [options]="cities" [(ngModel)]="selectedCity2" editable="true" optionLabel="name"&gt;&lt;/p-dropdown&gt;

&lt;h5&gt;Content with Filters&lt;/h5&gt;
&lt;p-dropdown [options]="countries" [(ngModel)]="selectedCountry" optionLabel="name" [filter]="true" [showClear]="true" placeholder="Select a Country"&gt;
    &lt;ng-template pTemplate="selectedItem"&gt;
        &lt;div class="country-item country-item-value"  *ngIf="selectedCountry"&gt;
            &lt;img src="assets/showcase/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + selectedCountry.code.toLowerCase()" /&gt;
            &lt;div&gt;&#123;&#123;selectedCountry.name&#125;&#125;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/ng-template&gt;
    &lt;ng-template let-country pTemplate="item"&gt;
        &lt;div class="country-item"&gt;
            &lt;img src="assets/showcase/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + country.value.code.toLowerCase()" /&gt;
            &lt;div&gt;&#123;&#123;country.value.name&#125;&#125;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/ng-template&gt;
&lt;/p-dropdown&gt;

&lt;h5&gt;Group&lt;/h5&gt;
&lt;p-dropdown [options]="groupedCities" [(ngModel)]="selectedCity3" placeholder="Select a City" [group]="true"&gt;
    &lt;ng-template let-group pTemplate="group"&gt;
        &lt;div class="p-d-flex p-ai-center"&gt;
            &lt;img src="assets/showcase/images/demo/flag/flag_placeholder.png" [class]="'p-mr-2 flag flag-' + group.value" style="width: 20px"/&gt;
            &lt;span&gt;&#123;&#123;group.label&#125;&#125;&lt;/span&gt;
        &lt;/div&gt;
    &lt;/ng-template&gt;
&lt;/p-dropdown&gt;

&lt;h5&gt;Virtual Scroll (10000 Items)&lt;/h5&gt;
&lt;p-dropdown [options]="items" [(ngModel)]="item" placeholder="Select Item" [virtualScroll]="true" [itemSize]="31" [filter]="false"&gt;&lt;/p-dropdown&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class DropdownDemo &#123;

    cities: City[];

    selectedCity1: City;

    selectedCity2: City;

    selectedCity3: string;

    selectedCountry: string;

    countries: any[];

    groupedCities: SelectItemGroup[];

    items: SelectItem[];

    item: string;

    constructor() &#123;
        this.items = [];
        for (let i = 0; i &lt; 10000; i++) &#123;
            this.items.push(&#123;label: 'Item ' + i, value: 'Item ' + i&#125;);
        &#125;

        this.cities = [
            &#123;name: 'New York', code: 'NY'&#125;,
            &#123;name: 'Rome', code: 'RM'&#125;,
            &#123;name: 'London', code: 'LDN'&#125;,
            &#123;name: 'Istanbul', code: 'IST'&#125;,
            &#123;name: 'Paris', code: 'PRS'&#125;
        ];

        this.groupedCities = [
            &#123;
                label: 'Germany', value: 'de', 
                items: [
                    &#123;label: 'Berlin', value: 'Berlin'&#125;,
                    &#123;label: 'Frankfurt', value: 'Frankfurt'&#125;,
                    &#123;label: 'Hamburg', value: 'Hamburg'&#125;,
                    &#123;label: 'Munich', value: 'Munich'&#125;
                ]
            &#125;,
            &#123;
                label: 'USA', value: 'us', 
                items: [
                    &#123;label: 'Chicago', value: 'Chicago'&#125;,
                    &#123;label: 'Los Angeles', value: 'Los Angeles'&#125;,
                    &#123;label: 'New York', value: 'New York'&#125;,
                    &#123;label: 'San Francisco', value: 'San Francisco'&#125;
                ]
            &#125;,
            &#123;
                label: 'Japan', value: 'jp', 
                items: [
                    &#123;label: 'Kyoto', value: 'Kyoto'&#125;,
                    &#123;label: 'Osaka', value: 'Osaka'&#125;,
                    &#123;label: 'Tokyo', value: 'Tokyo'&#125;,
                    &#123;label: 'Yokohama', value: 'Yokohama'&#125;
                ]
            &#125;
        ];

        this.countries = [
            &#123;name: 'Australia', code: 'AU'&#125;,
            &#123;name: 'Brazil', code: 'BR'&#125;,
            &#123;name: 'China', code: 'CN'&#125;,
            &#123;name: 'Egypt', code: 'EG'&#125;,
            &#123;name: 'France', code: 'FR'&#125;,
            &#123;name: 'Germany', code: 'DE'&#125;,
            &#123;name: 'India', code: 'IN'&#125;,
            &#123;name: 'Japan', code: 'JP'&#125;,
            &#123;name: 'Spain', code: 'ES'&#125;,
            &#123;name: 'United States', code: 'US'&#125;
        ];
    &#125;
&#125;
</app-code>

<app-code lang="css" ngNonBindable ngPreserveWhitespaces>
:host ::ng-deep .p-dropdown &#123;
    width: 14rem;
&#125;

.country-item-value &#123;
    img.flag &#123;
        width: 17px;
    &#125;
&#125;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
@Injectable()
export class CountryService &#123;

    constructor(private http: Http) &#123;&#125;

    getCountries() &#123;
        return this.http.get('showcase/resources/data/countries.json')
                    .toPromise()
                    .then(res => &lt;any[]&gt; res.json().data)
                    .then(data => &#123; return data; &#125;);
    &#125;
&#125;
</app-code>
        </p-tabPanel>
        
        <p-tabPanel header="StackBlitz">
            <ng-template pTemplate="content">
                <iframe src="https://stackblitz.com/edit/primeng-dropdown-demo?embed=1" style="width: 100%; height: 768px; border: none;"></iframe>
            </ng-template>
        </p-tabPanel>
    </p-tabView>
</div>
